<template>
  <div class="md-icon-base">
    <svg class="icon-svg" aria-hidden="true" :style="{width:size, height:size}" v-if="type==='svg'">
      <use :xlink:href="name"></use>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'MdIconBaseComponent',
  props: {
    /** 
     * 图标名称
     */
    name: {
      type: String,
      default: null
    },
    /**
     * 图标类型=svg、icon
     */
    type: {
      type: String,
      default: 'svg'
    },
    /**
     * 图标尺寸
     */
    size: {
      type: String,
      default: '20px'
    }
  }
}
</script>

<style lang="less" scoped>
.md-icon-base {
  display: inline-block;
  .icon-svg {
    fill: currentColor;
    vertical-align: middle;
  }
}
</style>